<template>
	<view class="level-container">
		<view class="name-list">
			<view :class="showIndex==0?'select name-item':'name-item'" @click="anewSelect(0)">{{province || '请选择'}}</view>
			<view :class="showIndex==1?'select name-item':'name-item'" @click="anewSelect(1)" v-if="showIndex>=1">{{city}}</view>
			<view :class="showIndex==2?'select name-item':'name-item'" @click="anewSelect(2)" v-if="showIndex>=2">{{area}}</view>
		</view>
		<view v-if="showIndex==0" class="content">
			<view class="li" @click="selectPro(item)" v-for="(item,index) in provinceData" :key="item">{{item.name}}</view>
		</view>
		<view v-if="showIndex==1" class="content">
			<view class="li" @click="selectCity(item)" v-for="(item,index) in cityData" :key="item">{{item.name}}</view>
		</view>
		<view v-if="showIndex==2" class="content">
			<view class="li" @click="selectaArea(item)" v-for="(item,index) in areaData" :key="item">{{item.name}}</view>
		</view>
	</view>
</template>

<script>
	import provinceData from './city-data/index.json';

	export default {
		props: {
			provinceItem: {
				type: String,
				default: '请选择',
			}
		},
		data() {
			return {
				province: "请选择",
				city: "请选择",
				area: "请选择",
				provinceData: '', // 当前展示的省数据
				cityData: '', // 当前展示的市数据
				areaData: '', //当前展示的区数据
				showIndex: 0,
				heightCot: 0,
			}
		},
		created() {
			this.province = this.provinceItem
			uni.getSystemInfo({
				success: res => {
					this.heightCot = (res.safeArea.height * 2) / 2
				}
			})
		},
		mounted() {
			this.provinceData = provinceData;
		},
		methods: {
			anewSelect(num) {
				switch (num) {
					case 0:
						this.showIndex = 0;
						this.areaData = [];
						this.streetsData = [];
						this.city = '请选择';
						this.area = '请选择';
						break;
					case 1:
						this.showIndex = 1;
						this.areaData = [];
						this.streetsData = [];
						this.area = '请选择';
						break;
					case 2:
						this.showIndex = 2;
						this.streetsData = [];
						break;
					case 3:
						break;
				}
			},
			selectPro(item) {
				const {
					code,
					name,
					children
				} = item;
				this.province = name;
				this.cityData = children;
				this.showIndex = 1;
				if (children.length === 1) {
					this.selectCity(children[0])
				}
			},
			selectCity(item) {
				const {
					code,
					name,
					children
				} = item;
				this.city = name;
				this.areaData = children;
				this.showIndex = 2;
			},
			selectaArea(item) {
				const {
					code,
					name
				} = item;
				this.area = name;
				this.showIndex = 0;
				const {
					province,
					city,
					area
				} = this;
				this.$emit('conceal', {
					province,
					city,
					area
				})
			}
		}
	}
</script>

<style lang="scss" scoped>

	.level-container {
		width: 100%;
		height: 100%;
		background: #fff;
		position: relative;

		.select {
			color: red;
			position: relative;

			&::after {
				content: '';
				width: 40upx;
				height: 6upx;
				background: red;
				position: absolute;
				left: 50%;
				bottom: 2upx;
				margin-left: -20upx;
			}
		}

		.li {
			font-size: 30upx;
		}

		.content,
		.name-list {
			padding: 0 20upx;
			.name-item {
				margin-right: 30upx;
				&:last-child {
					margin-right: 0;
				}
			}
		}

		.title {
			font-size: 32upx;
			margin: 30upx 20upx;
		}

		.name-list {
			width: 100%;
			display: flex;
			background-color: #fff;
			height: 60upx;
			position: fixed;
			
			.li {
				margin-right: 40upx;
				padding-bottom: 6upx;
			}
		}

		.content {
			height: auto;
			width: 100%;
			padding-top: 60upx;

			.li {
				border-bottom: 1upx solid #f1f1f1;
				padding: 25upx 0;
			}

			.li:last-child {
				border-bottom: none !important;
			}
		}
	}
</style>
